<script type="text/javascript">

    $(document).ready(function () {
        var theme = 'custom';
        var editrow = 1;
        var isEdit =false;
        var getAdapter = function () {
            // prepare the data
            var data =  <?php echo $view_data ?>;
            var source =
            {
                localdata: data,
                datatype: "json",
                datafields:
                [
	                 { name: 'id_properti' , type: 'string' },               
	                 { name: 'id_lokasi', type: 'string' },      
	                 { name: 'jenis', type: 'string' },      
	                 { name: 'id_class', type: 'string' },      
	                 { name: 'harga_jual', type: 'number' },      
	                 { name: 'luas_bangunan', type: 'number' },      
	                 { name: 'luas_tanah', type: 'number' },      
	                 { name: 'tanah_hook', type: 'string' },      
	                 { name: 'jl_lantai', type: 'number' },      
	                 { name: 'arah_posisi', type: 'string' },      
	                 { name: 'cluster', type: 'string' },      
	                 { name: 'nama_blok', type: 'string' },      
	                 { name: 'no_properti', type: 'string' },      
	                 { name: 'no_sertifikat', type: 'string' },      
	                 { name: 'jns_sertifikat', type: 'string' },      
	                 { name: 'status', type: 'string' },      
	                 { name: 'rencana_tgl_mulai', type: 'date' },      
	                 { name: 'rencana_tgl_selesai', type: 'date' },      
	                 { name: 'aktual_tgl_mulai', type: 'date' },      
	                 { name: 'aktual_tgl_selesai', type: 'date' },      
	                 { name: 'progress_pembangunan', type: 'number' },      
	                 { name: 'dt_stamp', type: 'date' },      
	                 { name: 'update_id', type: 'string' }
                 ],
                updaterow: function (rowid, rowdata, commit) {
                commit(true);
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            return dataAdapter;
        }
      
        // initialize the input fields.
 		  $("#id_properti").jqxInput({ theme: theme });
		  $("#id_lokasi").jqxInput({ theme: theme });
		  $("#jenis").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: '200px', height: '23px', theme: theme,
		                source: [
		                    'Rumah', 'Ruko', 'Apartemen'
		                ]
		   });
		  
		   $("#id_class").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: '200px', height: '23px', theme: theme,
		                source: [
		                    'class1', 'class2', 'class3'
		                ]
		   });
		   $("#harga_jual").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0});
		   $("#luas_bangunan").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0});
		   $("#luas_tanah").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0});
		   $("#tanah_hook").jqxCheckBox({ width: 120, height: 23, theme: theme });
		   $("#jl_lantai").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0});
		   $("#arah_posisi").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
		                source: [
		                    'Barat', 'Timur', 'Utara','Selatan'
		                ]
		   });
		   $("#cluster").jqxInput({ theme: theme });
		   $("#nama_blok").jqxInput({ theme: theme });
		   $("#no_properti").jqxInput({ theme: theme });
		   $("#no_sertifikat").jqxInput({ theme: theme });
		   $("#jns_sertifikat").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
		                source: [
		                    'HP','HGB', 'HM'
		                ]
		   });
		   $("#status").jqxDropDownList({ autoDropDownHeight: true, selectedIndex: 0, width: 200, height: 23, theme: theme,
		                source: [
		                    'Ready','Reserved','Indent'
		                ]
		   });
		   $("#rencana_tgl_mulai").jqxDateTimeInput({ width: '300px', height: '23px', formatString: 'd', theme: theme });
 		   $("#rencana_tgl_selesai").jqxDateTimeInput({ width: '300px', height: '23px', formatString: 'd', theme: theme });
		   $("#aktual_tgl_mulai").jqxDateTimeInput({ width: '300px', height: '23px', formatString: 'd', theme: theme });
		   $("#aktual_tgl_selesai").jqxDateTimeInput({ width: '300px', height: '23px', formatString: 'd', theme: theme });
		   $("#progress_pembangunan").jqxNumberInput({ width: '150px', height: '23px', theme: theme, decimalDigits: 0});
   
    
        // initialize jqxGrid
        $("#jqxgrid").jqxGrid(
        {
            width: $(window).width()-40,
            height: $(window).height(),
            source: getAdapter(),
            theme: theme,
            showstatusbar: true,
            sortable: true,
            pageable: true,
            autoheight: true,
            columnsresize: true,
            showfilterrow: true,
            filterable: true,
            pagesize: 14, 
            pagesizeoptions: ['14', '20', '50'],
            renderstatusbar: function (statusbar) {
                // appends buttons to the status bar.
                var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                var editButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
                var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='<?php echo base_url(); ?>images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                container.append(addButton);
                container.append(editButton);
                container.append(deleteButton);
                container.append(reloadButton);
                statusbar.append(container);
                addButton.jqxButton({ theme: theme, width: 65, height: 20 });
                editButton.jqxButton({ theme: theme, width: 65, height: 20 });
                deleteButton.jqxButton({ theme: theme, width: 65, height: 20 });
                reloadButton.jqxButton({ theme: theme, width: 65, height: 20 });
                // add new row.
                addButton.click(function (event) {
                	editrow = 1;
                	isEdit=false;
                    $("#id_properti").jqxInput({disabled: false });
                    $("#id_lokasi").jqxInput({disabled: false });
			        $("#id_properti").val('');               
                    $("#id_lokasi").val('');  
                    $("#jenis").jqxDropDownList({ selectedIndex: 0 });
                    $("#id_class").val('');
                    $("#harga_jual").val('0.00');
                    $("#luas_bangunan").val('');
                    $("#luas_tanah").val('');
                    $("#tanah_hook").jqxCheckBox({ checked: false });
                    $("#jl_lantai").val('');
                    $("#arah_posisi").val('');
                    $("#cluster").val('');
                    $("#nama_blok").val('');
                    $("#no_properti").val('');
                    $("#no_sertifikat").val('');
                    $("#jns_sertifikat").val('');
                    $("#status").jqxDropDownList({selectedIndex: -0 });
                    //$("#rencana_tgl_mulai").val('');
                    //$("#rencana_tgl_selesai").val(''); 
                    //$("#aktual_tgl_mulai").val('');
                    //$("#aktual_tgl_selesai").val('');
                    //$("#progress_pembangunan").val('');
                    
                    var offset = $("#jqxgrid").offset();
                    var data=new Array();
                    $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 200 , y: parseInt(offset.top) - 100 } });
                    // show the popup window.
                    $("#jqxCUForm").jqxWindow('show');
                       
                });
                editButton.click(function (event) {
                	var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                	var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                	if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                         var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                         editrow = selectedrowindex;
                         isEdit=true;
                         var offset = $("#jqxgrid").offset();
                         $("#jqxCUForm").jqxWindow({ position: { x: parseInt(offset.left) + 200, y: parseInt(offset.top) - 100} });
                         var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                    
     			         $("#id_properti").val(dataRecord.id_properti);           
                         $("#id_lokasi").val(dataRecord.id_lokasi);
                         $("#jenis").val(dataRecord.jenis);
                         $("#id_class").val(dataRecord.id_class);
                         $("#harga_jual").val(dataRecord.harga_jual);
                         $("#luas_bangunan").val(dataRecord.luas_bangunan);
                         $("#luas_tanah").val(dataRecord.luas_tanah);
                         $("#tanah_hook").val(dataRecord.tanah_hook);
                         $("#jl_lantai").val(dataRecord.jl_lantai);
                         $("#arah_posisi").val(dataRecord.arah_posisi);
                         $("#cluster").val(dataRecord.cluster);
                         $("#nama_blok").val(dataRecord.nama_blok);
                         $("#no_properti").val(dataRecord.no_properti);
                         $("#no_sertifikat").val(dataRecord.no_sertifikat);
                         $("#jns_sertifikat").val(dataRecord.jns_sertifikat);
                         $("#status").val(dataRecord.status);
                         $("#rencana_tgl_mulai").val(dataRecord.rencana_tgl_mulai);
                         $("#rencana_tgl_selesai").val(dataRecord.rencana_tgl_selesai);
                         $("#aktual_tgl_mulai").val(dataRecord.aktual_tgl_mulai);
                         $("#aktual_tgl_selesai").val(dataRecord.aktual_tgl_selesai);
                         $("#progress_pembangunan").val(dataRecord.progress_pembangunan);
                         
                         $("#id_properti").jqxInput({disabled: true });
                         $("#id_lokasi").jqxInput({disabled: true });
                         $("#jqxCUForm").jqxWindow('show');
                         
                    }
                });
              // initialize the popup window and buttons.
                $("#jqxCUForm").jqxWindow({ width:800, height:1000,resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.2 });
                $("#Close").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Close").click(function () {
                  	 $.ajax({
							url : "<?php echo site_url('property_ctrl/Refresh')?>",
							type : 'POST',
							success: function(msg){
								 $("#content_body").html(msg);
								 //alert("form di close");
							}
					  });
                  	 $("#jqxCUForm").jqxWindow('hide');
                });
                
                $("#Save").jqxButton({ theme: theme ,width: 65, height: 25});
                $("#Save").click(function () {
                	if (isEdit) {
                		 if (editrow >= 0) {
                             var row = { productName: $("#productName").val(), quantityPerUnit: $("#quantityPerUnit").val()
                             };
                             $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                            
                             var form_data = {
     								 action:'E',
                                     product: $('#productName').val(),
                                     quantity: $('#quantityPerUnit').val()
                              };
                         }
                    } else {
                    	var row = { productName: $("#productName").val(), quantityPerUnit: $("#quantityPerUnit").val() };
						var form_data = {
								action:'A',
                                product: $('#productName').val(),
                                quantity: $('#quantityPerUnit').val()
                         };
	
	                }

                	$.ajax({
							url : "<?php echo site_url('property_ctrl/Save')?>",
							type : 'POST',
							data : form_data,
							success: function(msg){
	                            alert("Data Berhasil di simpan");
							}
						
					});
                     return false; 
                });
                
                // delete selected row.
                deleteButton.click(function (event) {
                    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                        var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                        $("#jqxgrid").jqxGrid('deleterow', id);
                        
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
                    	var productName= dataRecord.productName;
                        var form_data = {
                                product: productName
                        };
                        $.ajax({
							url : "<?php echo site_url('property_ctrl/Delete')?>",
							type : 'POST',
							data : form_data,
							success: function(html){
								 $("#content_body").html(html);
							}
					  });
                       
                    }
                });
                // reload grid data.
                reloadButton.click(function (event) {
                	$("#jqxgrid").jqxGrid('clearfilters');
                	 $.ajax({
							url : "<?php echo site_url('property_ctrl/Refresh')?>",
							type : 'POST',
						    success: function(html){
						    	 $("#content_body").html(html);
							}
					  });
         	
                });
                            
            },
            
            columns: [
              { text: 'Properti ID', datafield: 'id_properti', width:100, cellsalign: 'left' },
              { text: 'Lokasi', datafield: 'id_lokasi', width:150, cellsalign: 'left' },
              { text: 'Jenis', datafield: 'jenis', width:100, cellsalign: 'left' },
              { text: 'Class', datafield: 'id_class', width:100, cellsalign: 'left' },
              { text: 'Harga Jual', datafield: 'harga_jual', width:150, cellsalign: 'right' , cellsformat: 'n2'},
              { text: 'Luas Bangunan', datafield: 'luas_bangunan', width:100, cellsalign: 'right' },
              { text: 'Luas Tanah', datafield: 'luas_tanah', width:100, cellsalign: 'right' },
              { text: 'Posisi', datafield: 'tanah_hook', width:100, cellsalign: 'left' },
              { text: 'Jumlah Lantai', datafield: 'jl_lantai', width:100, cellsalign: 'right' },
              { text: 'Arah Posisi', datafield: 'arah_posisi', width:200, cellsalign: 'left' },
              { text: 'Nama Cluster', datafield: 'cluster', width:200, cellsalign: 'left' },
              { text: 'Nama Blok', datafield: 'nama_blok', width:100,cellsalign: 'left' },
              { text: 'No Properti', datafield: 'no_sertifikat', width:100, cellsalign: 'left' },
              { text: 'No Sertifikat', datafield: 'id_class', width:200, cellsalign: 'left' },
              { text: 'Jenis Sertifikat', datafield: 'jns_sertifikat', width:100, cellsalign: 'left' },
              { text: 'Status', datafield: 'status', width:80, cellsalign: 'left' }
             ]
        });

        $('#events').jqxPanel({ width:  $(window).width()-40, height: 50, theme: theme });
        $("#jqxgrid").on("pagechanged", function (event) {
            $("#eventslog").css('display', 'block');
            if ($("#events").find('.logged').length >= 5) {
                $("#events").jqxPanel('clearcontent');
            }
            var args = event.args;
            var eventData = "pagechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });
        $("#jqxgrid").on("pagesizechanged", function (event) {
            $("#eventslog").css('display', 'block');
            $("#events").jqxPanel('clearcontent');
            var args = event.args;
            var eventData = "pagesizechanged <div>Page:" + args.pagenum + ", Page Size: " + args.pagesize + ", Old Page Size: " + args.oldpagesize + "</div>";
            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            // get page information.          
            var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
            $('#paginginfo').html("<div style='margin-top: 5px;'>Page:" + paginginformation.pagenum + ", Page Size: " + paginginformation.pagesize + ", Pages Count: " + paginginformation.pagescount + "</div>");
        });

        
    });

    function createElements(theme) {
        $('#eventWindow').jqxWindow({ maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
            theme: theme, resizable: false, isModal: true, modalOpacity: 0.3,
            okButton: $('#ok'),
            initContent: function () {
                $('#ok').jqxButton({ theme: theme, width: '65px' });
                $('#ok').focus();
            }
        });
       // $('#events').jqxPanel({ theme: theme, height: '250px', width: '450px' });
      
    }
    
</script>

 <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; ">
	 <div id="jqxgrid">  </div>
	 <div style="margin-top: 30px;">
	         <div id="cellbegineditevent"></div>
	         <div style="margin-top: 10px;" id="cellendeditevent"></div>
	 </div>
	
		
	   <form class="form" id="jqxCUForm"  style="font-size: 12px; font-family: Verdana">
		   <div>
		        Add/Edit Product
		   </div>
		   <div style="overflow: hidden;">
			   <table >
			        <tr>
			            <td align="left">Properti ID</td>
			            <td align="left"><input id="id_properti" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Lokasi</td>
			            <td align="left"><input id="id_lokasi" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Jenis</td>
			            <td align="left"><input id="jenis" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Class</td>
			            <td align="left"><input id="id_class" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Harga Jual</td>
			            <td align="Left"><input id="harga_jual" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Luas Bangunan</td>
			            <td align="left"><input id="luas_bangunan" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Posisi</td>
			            <td align="left"><input id="tanah_hook" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Jumlah Lantai</td>
			            <td align="left"><input id="jl_lantai" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Arah Posisi</td>
			            <td align="left"><input id="arah_posisi" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Nama Cluster</td>
			            <td align="left"><input id="cluster" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Nama Blok</td>
			            <td align="left"><input id="nama_blok" /></td>
			        </tr>
			        <tr>
			        	<td align="left">No Properti</td>
			            <td align="left"><input id="no_properti" /></td>
			        </tr>
			        <tr>
			        	<td align="left">No Sertifikat</td>
			            <td align="left"><input id="no_sertifikat" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Jenis Sertifikat</td>
			            <td align="left"><input id="jns_sertifikat" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Status</td>
			            <td align="left"><input id="status" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Rencana Mulai</td>
			            <td align="left"><input id="rencana_tgl_mulai" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Rencana Selesai</td>
			            <td align="left"><input id="rencana_tgl_selesai" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Aktual  Mulai</td>
			            <td align="left"><input id="aktual_tgl_mulai" /></td>
			        </tr>
			        <tr>
			        	<td align="left">Aktual  Selesai</td>
			            <td align="left"><input id="aktual_tgl_selesai" /></td>
			        </tr>
			       <tr>
			        	<td align="left">Progress Pembangunan</td>
			            <td align="left"><input id="progress_pembangunan" /></td>
			        </tr> 
			        
			        
			        <tr></tr>
			        <tr>
			        	<td></td>
						<td align="right"><input type="button" id="Save" value="Save"/> 
						<input type="button" id="Close" value="Close"/></td>      
			
					</tr>
			   </table>
	       </div>    
		</form>
	
	
	
	<div style="visibility: hidden;" id="jqxWidgetDialog">
         <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;"
            id="mainDialogContainer">

            <div id="eventWindow">
                <div>
                   <!-- <img width="14" height="14" src="../../images/help.png" alt="" /> -->
                    Property Management</div>
                <div>
                    <div>
                        Save Data Successfully
                    </div>
                    <div>
	                    <div style="float: right; margin-top: 15px;">
	                        <input type="button" id="ok" value="OK" style="margin-right: 10px" />
	                     </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	
</div>
